<template>
  <!--  -->
  <layout title="订单统计" background="#fff">
    <view class="statistics">
      <u-tabs-swiper
        :list="typeList"
        font-size="30"
        bar-height="12"
        bar-width="60"
        style="margin-top: 37rpx"
        :bar-style="{
          'border-radius': '0',
          bottom: '0px',
          transform: 'translateX(-50%)',
          background: 'linear-gradient(90deg, #FFE6A3, #FFCB40)',
        }"
        :active-item-style="{
          'font-size': '40rpx',
          position: 'relative',
        }"
        inactive-color="#666666"
        active-color="#000000"
        :gutter="66"
        :is-scroll="true"
        :current="typeIndex"
        @change="refreshBySwitch"
      />
      <view class="statistics-body">
        <image
          class="statistics-cover"
          :src="getImgSrc('/hall/bg_card@2x.png')"
          mode="widthFix"
        />
        <view class="statistics-dashboard">
          <view class="statistics-dashboard-item">
            <view class="st-title">{{ count }}</view>
            <view class="st-label">完成订单(单)</view>
          </view>
          <view class="statistics-dashboard-item">
            <view class="st-title">{{ fee }}</view>
            <view class="st-label">总收入(元)</view>
          </view>
        </view>
      </view>
      <view class="st-order">订单明细</view>
      <view class="st-orderList">
        <u-tabs-swiper
          :list="stateList"
          font-size="30"
          bar-height="12"
          bar-width="60"
          style="margin-top: 37rpx"
          :bar-style="{
            'border-radius': '0',
            bottom: '0px',
            transform: 'translateX(-50%)',
            background: 'linear-gradient(90deg, #FFE6A3, #FFCB40)',
          }"
          :active-item-style="{
            'font-size': '40rpx',
            position: 'relative',
          }"
          inactive-color="#666666"
          active-color="#000000"
          :gutter="66"
          :is-scroll="true"
          :current="stateIndex"
          @change="(e) => (stateIndex = e)"
        />
        <view class="orderList">
          <view v-for="(item, idx) in list" class="order-record" :key="idx">
            <view class="order-record-title">任务号：{{ item.no }}</view>
            <view class="order-record-time">{{ item.createTime }}</view>
            <view
              class="order-record-amount"
              :style="{ color: item.fee < 0 ? '#4E95FC' : '#EE3B32' }"
              >+{{ item.fee }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </layout>
</template>
<script>
export default {
  name: "statistics",
  components: {},
  data() {
    return {
      typeIndex: 0,
      stateIndex: 0,
      fee: 0,
      count: 0,
      list: [],
      
      typeList: [],
      stateList: [],
    };
  },
  onLoad(option) {},
  created() {
    this.triggerToFetch();
  },
  onShow() {},
  watch: {
    typeIndex(newV) {
      this.update();
    },
    stateIndex(newV) {
      this.update();
    },
  },
  computed: {},
  methods: {
    refreshBySwitch(index) {
      this.typeIndex = index;
    },
    update() {
      this.$u.api
        .queryStatisticsByState({
          type: this.typeList[this.typeIndex].value,
          state: this.stateList[this.stateIndex].value,
        })
        .then((res) => {
          this.fee = res.data.fee;
          this.count = res.data.count;
          this.list = res.data.list || [];
        });
    },
    async triggerToFetch() {
      // 获取钱包余额
      this.$u.api.queryStatistics().then((res) => {
        // this.operatorList = res.data.type || [];
        this.stateList = (res.data.state || []).map((d) => ({
          name: d.value,
          value: d.key,
        }));
        this.typeList = (res.data.type || []).map((d) => ({
          name: d.value,
          value: d.key,
        }));

        this.update();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.statistics {
  height: 100%;

  &-body {
    position: relative;
    margin: 18rpx auto 58rpx;
    view {
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #282828;
      line-height: 36rpx;
    }
  }
  &-cover {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 730rpx;
    height: 300rpx;
  }
  &-dashboard {
    height: 300rpx;
    position: relative;
    display: flex;
    padding-top: 86rpx;
    padding-right: 100rpx;
    &-item {
      width: 50%;
      padding-left: 100rpx;
    }
    .st-title {
      font-size: 60rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #f5f7f9;
      line-height: 46rpx;
      margin-bottom: 24rpx;
    }
    .st-label {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #f5f7f9;
      line-height: 46rpx;
      opacity: 0.6;
    }
  }
  .orderList {
  }
  .order-record {
    width: 670rpx;
    margin: 0 auto 0;
    padding: 48rpx 0;
    height: 70rpx;
    background: #f6f7fb;
    border-radius: 21rpx;
    position: relative;
    box-sizing: content-box;
    border-bottom: 1rpx solid #eaeaea;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    &-title {
      margin-bottom: 14rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #282828;
      line-height: 1;
    }

    &-time {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b5b5b5;
      line-height: 1;
    }

    &-amount {
      position: absolute;
      right: 28rpx;
      top: 50%;
      transform: translateY(-50%);
      font-size: 38rpx;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 46rpx;
    }
  }
  .st-order {
    margin-left: 40rpx;
    margin-bottom: 19rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #b5b5b5;
    line-height: 46rpx;
  }
  .st-orderList {
    background: #f5f7f9;
    border-radius: 40rpx;
    padding: 48rpx 0;
    /deep/.u-tabs {
      background: transparent !important;
      margin-top: 0 !important;
    }
  }
  &-btn {
    margin: 60rpx auto;
    width: 690rpx;
    height: 96rpx;
    background-image: linear-gradient(90deg, #4aabf6, #4675f6);
    box-shadow: 0rpx 16rpx 30rpx 0rpx rgba(74, 169, 246, 0.2);
    border-radius: 47rpx;

    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 96rpx;

    &[disabled] {
      background-color: #eaeaea;
      background-image: none;
      color: #fff;
      box-shadow: none;
      &::after {
        content: none;
      }
    }
  }
}
</style>
